<template>
  <afl-loading v-if="!data.ready" :width="50" :height="50" class="afl-loading" :tip-style="{ fontSize: '16px' }">
    Loading...
  </afl-loading>
  <fullScreenContainer v-else>
    <el-container class="container">
      <el-header class="one-container ">
        <!-- 今日已发货 -->
        <el-container class="card-container card">
          <el-header class="header" style="color: #08ab0a;margin-bottom: 20px">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
              <el-tab-pane name="first">
                <template #label>
                  <span class="custom-tabs-label">
                   <el-icon style="font-size: 28px">
                    <icon-font icon-class="afl-weixinshoucang"></icon-font>
                  </el-icon>
                    <span>{{ $t('wms.ordersHaveBeen') }}</span>
                  </span>
                </template>
              </el-tab-pane>
              <el-tab-pane name="second">
                <template #label>
                  <span class="custom-tabs-label">
                   <el-icon style="font-size: 28px">
                    <icon-font icon-class="afl-shujuhuizong"></icon-font>
                  </el-icon>
                    <span>{{ $t('wms.summaryOfOrders') }}</span>
                  </span>
                </template>
              </el-tab-pane>
            </el-tabs>
          </el-header>
          <!-- 表格 -->
          <template v-if="activeName==='first'">
            <el-table border :data="data.sublist" style="width:100%;height: 85%;" :highlight-current-row="true"
                      :fit="true" stripe table-layout="fixed" header-align="center"
                      :header-cell-style="{color:'#000',textAlign:'center',borderColor:' #CCC',background:'#f9f9f9'}"
                      :cell-style="{textAlign: 'center'}" :current-page="data.currentPage">
              <el-table-column prop="id" label="id" v-if="false"/>
              <el-table-column prop="salesOrders" :label="$t('wms.salesNo')" align="center"/>
              <el-table-column prop="dnCode" :label="$t('wms.letterOfAdvice')" align="center"/>
              <el-table-column prop="materialCode" :label="$t('wms.materialCode')" align="center" width="110"/>
              <el-table-column prop="sumQty" :label="$t('wms.qtyShipped')" align="center" width="110">
                <template #default="scope">
                  <el-tag effect="dark" :type="scope.row.sumQty > 0 ? 'success': 'danger'" size="large"
                          style="width:80px">
                    {{ scope.row.sumQty }}
                  </el-tag>
                </template>
              </el-table-column>
            </el-table>
            <div class="demo-pagination-block">
              <el-pagination :currentPage="data.currentPage" :page-size="data.pagesize" :page-sizes="[20, 30, 50]"
                             :small="small" :disabled="disabled" :background="background"
                             layout="total, sizes, prev, pager, next, jumper"
                             :total="data.total" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
            </div>
          </template>
          <div class="charts" v-if="activeName==='second'">
            <v-chart ref="mychart1" class="chart" :option="options"></v-chart>
          </div>
        </el-container>
        <!-- 待发货信息 -->
        <el-header class="card-wrapper card">
          <el-header class="header" style="color: #0081ff;">
            <el-icon style="font-size: 28px">
              <icon-font icon-class="afl-a-caiwuhuizong2x"></icon-font>
            </el-icon>
            {{ $t('wms.goodsInfo') }}
          </el-header>
          <!-- 表格 -->
          <el-table border :data="data.tableDataH" style="width:100%;height: 85%;" :highlight-current-row="true"
                    :fit="true"  table-layout="fixed" header-align="center"
                    :header-cell-style="{color:'#000',textAlign:'center',borderColor:' #CCC',background:'#f9f9f9'}"
                    :cell-style="{textAlign: 'center'}"
                    :row-style="tableRowClassName"
                    @row-click="(row, column, event) => rowClickH(row, column, event) "
                    :current-page="data.currentPageH">
            <el-table-column prop="id" label="id" v-if="false"/>
            <el-table-column prop="dnCode" :label="$t('wms.letterOfAdvice')" align="center"/>
            <el-table-column prop="salesOrderCode" :label="$t('wms.salesNo')" align="center"/>
            <el-table-column prop="dnLine" :label="$t('wms.lineNumber')" align="center" width="60"/>
            <el-table-column prop="materialCode" :label="$t('wms.materialCode')" align="center"/>
            <el-table-column prop="isDeliveredToday"  v-if="false" align="center"/>
            <el-table-column prop="saleQty" :label="$t('wms.requiredQty')" align="center">
              <template #default="scope">
                <el-tag effect="dark" :type="scope.row.saleQty < 0 ? 'danger': 'success'" size="large"
                        style="width:80px">
                  {{ scope.row.saleQty }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="scanQty" :label="$t('wms.shippedQty')" align="center">
              <template #default="scope">
                <el-tag effect="dark" :type="scope.row.scanQty < 0 ? 'danger': ''" size="large"
                        style="width:80px">
                  {{ scope.row.scanQty }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="baseQty" :label="$t('wms.undeliveredQty')" align="center">
              <template #default="scope">
                <el-tag effect="dark" :type="scope.row.baseQty < 0 ? 'danger': 'warning'" size="large"
                        style="width:80px">
                  {{ scope.row.baseQty }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="deliveryDate" :label="$t('mes.dateOfDelivery')" align="center">
              <template #default="scope">
                <el-tag :effect="scope.row.isDeliveredToday === '是' ? 'dark':'plain'"
                        :type="scope.row.isDeliveredToday === '是' ? 'danger':'info'"
                        size="large">
                  {{ scope.row.deliveryDate }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="delayDays" :label="$t('wms.daysOfDelay')" align="center">
              <template #default="scope">
                <el-tag effect="dark"
                        :type="scope.row.delayDays < '0' ? 'danger': scope.row.delayDays==='未延期'?'success':'info'"
                        size="large"
                        style="width:80px">                                        <!-- {{ scope.row.delayDays === '未延期' ? $t('wms.unextended') : scope.row.delayDays < 0 ? Math.abs(Number(scope.row.delayDays)) : scope.row.delayDays }}                  -->
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
          <div class="demo-pagination-block">
            <el-pagination :currentPage="data.currentPageH" :page-size="data.pageSizeH" :page-sizes="[20, 30, 50]"
                           :small="small" :disabled="disabled" :background="background"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="data.totalH" @size-change="handleSizeChangeH"
                           @current-change="handleCurrentChangeH"/>
          </div>
        </el-header>
      </el-header>
      <!-- 销售订单行信息 -->
      <el-main class="second-container card">
        <el-header class="header" style="color: #7d7dda;">
          <el-icon style="font-size: 36px">
            <icon-font icon-class="afl-liebiao"></icon-font>
          </el-icon>
          {{ $t('wms.salesOrderLine') }}
        </el-header>
        <!--表格 -->
        <el-table border :data="data.tableDataD" style="width:100%;height: 85%;" :highlight-current-row="true"
                  :fit="true" stripe table-layout="fixed" header-align="center"
                  :header-cell-style="{color:'#000',textAlign:'center',borderColor:' #CCC',background:'#f9f9f9'}"
                  :cell-style="{textAlign: 'center'}" :current-page="data.currentPageD">
          <el-table-column :label="$t('wms.basicInformation')">
            <el-table-column prop="id" label="id" v-if="false"/>
            <el-table-column prop="salesOrderCode" :label="$t('wms.salesNo')" align="center"/>
            <el-table-column prop="dnCode" :label="$t('wms.letterOfAdvice')" align="center"/>
            <el-table-column prop="dnLine" :label="$t('wms.lineNo')" align="center"/>
            <el-table-column prop="materialCode" :label="$t('wms.materialCode')" align="center"/>
            <el-table-column prop="materialName" :label="$t('wms.materialName')" align="center"/>
            <el-table-column prop="spec" :label="$t('wms.materialSpce')" align="center" width="280"/>
            <el-table-column prop="deliveryDate" :label="$t('mes.dateOfDelivery')" align="center"/>
          </el-table-column>
          <el-table-column :label="$t('wms.shippingInfor')">
            <el-table-column prop="deliveryTime" :label="$t('wms.deliveryDate')" align="center"/>
            <el-table-column prop="saleQty" :label="$t('wms.requiredQty')" align="center" >
              <template #default="scope">
                <el-tag effect="dark" :type="scope.row.saleQty < 0 ? 'danger': 'success'" size="large"
                        style="width:80px">
                  {{ scope.row.saleQty }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="scanQty" :label="$t('wms.shippedQty')" align="center" >
              <template #default="scope">
                <el-tag effect="dark" :type="scope.row.scanQty < 0 ? 'danger': ''" size="large"
                        style="width:80px">
                  {{ scope.row.scanQty }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="baseQty" :label="$t('wms.undeliveredQty')" align="center" >
              <template #default="scope">
                <el-tag effect="dark" :type="scope.row.baseQty < 0 ? 'danger': 'warning'" size="large"
                        style="width:80px">
                  {{ scope.row.baseQty }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="baseQty" :label="$t('wms.firstStatus')" align="center" width="100">
              <template #default="scope">
                <el-tag effect="dark"
                        :type="scope.row.baseQty < 0 ? 'danger': scope.row.baseQty===0?'success':'danger'"
                        size="large"
                        style="width:80px">
                  {{ scope.row.baseQty === 0 ? $t('wms.satisfy') :  $t('wms.unmet')}}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="delayDays" :label="$t('wms.daysOfDelay')" align="center" width="100">
              <template #default="scope">
                <el-tag effect="dark"
                        :type="scope.row.delayDays < '0'? 'danger': scope.row.delayDays==='未延期'?'success':'info'"
                        size="large"
                        style="width:80px">
                  <!-- {{ scope.row.delayDays === '未延期' ? $t('wms.unextended') : scope.row.delayDays<'0'?Math.abs(Number(scope.row.delayDays)):0 }} -->
                </el-tag>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
        <div class="demo-pagination-block">
          <el-pagination :currentPage="data.currentPageD" :page-size="data.pageSizeD" :page-sizes="[20, 30, 50]"
                         :small="small" :disabled="disabled" :background="background"
                         layout="total, sizes, prev, pager, next, jumper"
                         :total="data.totalD" @size-change="handleSizeChangeD" @current-change="handleCurrentChangeD"/>
        </div>
      </el-main>
    </el-container>
  </fullScreenContainer>
</template>

<script setup>
// 引入组件，进去页面显示加载
import aflLoading from '@/components/loading'
import iconFont from '@/components/IconFont/iconFont'
import fullScreenContainer from '@/components/fullScreenContainer'
import { onMounted, reactive, watch, ref } from 'vue'
import { issuedToday, deliveryInforH, deliveryInforD, pieChart } from '@/api/mesApi'
import useI18n from '@/hooks/language'
import ScaleBox from 'vue3-scale-box'

const { t } = useI18n()

const data = reactive({
  ready: false,
  tableDataH: [], // 主表 代发货信息
  tableDataD: [], // 主表 销售订单行信息
  sublist: [], // 今日已发订单
  currentPage: 1, // 当前页
  pageSize: 20, // 每页显示多少条
  total: 0, // 总的多少数据
  currentPageD: 1, // 当前页
  pageSizeD: 20, // 每页显示多少条
  totalD: 0, // 总的多少数据
  currentPageH: 1, // 当前页
  pageSizeH: 20, // 每页显示多少条
  totalH: 0, // 总的多少数据
  chartColumns: [], // 柱状图标题
  chartRows: []// 柱状图数据
})

const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const activeName = ref('first')

// 柱状图
const mychart1 = ref(null)
const options = ref(null)

onMounted(() => {
  data.ready = true
  dataWmsH()
  deliveryInfor()
  dataWmsDnD()
  setTime()
  chartData()
})
const tableRowClassName = (e) => {
  if (e?.row?.delayDays < '0') {
    console.log(e?.row)
    return 'background-color: #e85757 !important'
  }
}
const handleClick = (tab, event) => {
  console.log(tab, event)
  chartData()
}
// 柱状图数据
const chartData = async () => {
  await pieChart().then(res => {
    if (res.status === 200) {
      console.log(res)
      data.chartColumns = res.data.name
      data.chartRows = res.data.value
      mychart1.value.setOption(renderLineOptions())
    }
  })
}

const renderLineOptions = () => {
  return {
    xAxis: {
      // data: data.chartColumns,
      data: [t('mes.all'), t('wms.year'), t('wms.currentMonth'), t('wms.today')],
      axisLabel: {
        show: true,
        textStyle: {
          color: '#8B8B8B', // 这里是改变字体颜色
          fontSize: 16// 字体大小
        }
      }
    },
    yAxis: {
      name: '/柜',
      nameTextStyle: {
        color: '#8B8B8B',
        nameLocation: 'start'
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: '#8B8B8B',
          fontSize: 16
        }
      },
      axisLine: {
        show: true, // 是否显示Y轴线
        lineStyle: {
          color: '#8B8B8B', // Y轴线颜色
          width: 1, // 线的大小
          type: 'solid' // Y轴线的类型
        }
      }
    },
    series: [
      {
        data: data.chartRows,
        type: 'bar',
        barWidth: '40%',
        itemStyle: {
          // 通常情况下：
          normal: {
            // 每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
            color: function (params) {
              var colorList = [
                '#65d186',
                '#f67287',
                '#f29e3c',
                '#c05bdd'
              ] // 每根柱子的颜色
              return colorList[params.dataIndex]
            }
          },
          offset: 6 // 偏移量
        },
        label: {
          show: true,
          position: 'top',
          fontSize: 18,
          color: '#8B8B8B',
          formatter: (params) => {
            const reData = (params.data || 0).toString().replace(/(\d)(?=(?:\d{3}) + $)/g, '$1,')
            return reData
          }
        }
      }
    ]
  }
}
// 定时执行
const setTime = () => {
  setInterval(async () => {
    await dataWmsDnD()
    await deliveryInfor()
    await dataWmsH()
    if (activeName.value === 'first') {
      activeName.value = 'second'
      console.log(activeName.value)
      handleClick()
    } else {
      activeName.value = 'first'
      console.log(activeName.value)
      handleClick()
    }
  }, 6000)
}
// 今日已发货信息
const deliveryInfor = () => {
  issuedToday({
    page: data.currentPage,
    rows: data.pageSize
  }).then(function (res) {
    // console.log(res)
    data.sublist = res.rows
  })
}

// 待发货信息
const dataWmsH = () => {
  deliveryInforH({
    page: data.currentPageH,
    rows: data.pageSizeH
  }).then(function (res) {
    // console.log(res)
    data.tableDataH = res.rows
    data.totalH = res.total
  })
}

// 待发货信息表格点击事件
const rowClickH = (row, column, event) => {
  const dnHId = row.id
  // deliveryInforD(dnHId).then(function (res) {
  //   console.log(res)
  //   data.tableDataD = res
  // })
}

// 销售订单行信息k
const dataWmsDnD = () => {
  deliveryInforD({
    page: data.currentPageD,
    rows: data.pageSizeD
  }).then(function (res) {
    // console.log(res)
    data.tableDataD = res.rows
    data.totalD = res.total
  })
}

// 第一个表格的事件  下一页与每页多少条
const handleSizeChange = (val) => {
  data.pageSize = val
  deliveryInfor()
}
const handleCurrentChange = (val) => {
  console.log(val)
  data.currentPage = val
  // 调用接口返回表格数据
  deliveryInfor()
}

// 第二个表格的事件  下一页与每页多少条
const handleSizeChangeH = (val) => {
  data.pageSizeH = val
  dataWmsH()
}
const handleCurrentChangeH = (val) => {
  data.currentPageH = val
  // 调用接口返回表格数据
  dataWmsH()
}

// 第三个表格的事件  下一页与每页多少条
const handleSizeChangeD = (val) => {
  data.pageSizeD = val
  dataWmsDnD()
}
const handleCurrentChangeD = (val) => {
  data.currentPageD = val
  // 调用接口返回表格数据
  dataWmsDnD()
}
</script>

<style scoped lang="scss">
@forward "index";

body,
#app,
#dv-full-screen-container {
  background-color: #dee5f5
}
</style>
